<script setup lang="ts">
import type { SupportedLanguagesType } from '@/locales';

import { SUPPORT_LANGUAGES } from '@/constants';
import { Languages } from 'lucide-vue-next';
import { loadLocaleMessages } from '@/locales';
import { preferences, updatePreferences } from '@/core/preferences';

import { BasicDropdownRadioMenu, BasicIconButton } from '@/components/Basic';

defineOptions({
  name: 'LanguageToggle',
});

async function handleUpdate(value: string) {
  const locale = value as SupportedLanguagesType;
  updatePreferences({
    app: {
      locale,
    },
  });
  await loadLocaleMessages(locale);
}
</script>

<template>
  <div>
    <BasicDropdownRadioMenu
      :menus="SUPPORT_LANGUAGES"
      :model-value="preferences.app.locale"
      @update:model-value="(val) => handleUpdate(val as string)"
    >
      <BasicIconButton>
        <Languages class="size-4 text-foreground" />
      </BasicIconButton>
    </BasicDropdownRadioMenu>
  </div>
</template>
